<template>
    <el-affix :offset="0">
        <div class="meun shadow-md fixed bg-light-50 transition-all duration-300" :style="{ width: $store.state.menuWidth }">
            <div class="flex items-center justify-center h-[64px]">
                <img v-if="$store.state.menuWidth == '250px'" src="@/assets/mindsparkle_logo.png" class="h-[60px]">
                <img v-else src="@/assets/weblog-logo-mini.png" class="h-[60px]">
            </div>

            <el-menu :collapse="isCollapse" class="border-0 user-el-menu"
            :default-active="defaultActive"
            :collapse-transition="false"
            unique-opened
            @select="handleSelect">
                <el-menu-item v-for="item in menus" :key="item.path" :index="item.path" class="user-el-menu-item">
                    <el-icon>
                        <component :is="item.icon"></component>
                    </el-icon>
                    <span>{{ item.name }}</span>
                </el-menu-item>
            </el-menu>
        </div>
    </el-affix>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';
import { computed, ref } from 'vue';
import { useStore } from 'vuex';

const router = useRouter()
const route = useRoute()
const store = useStore()

const defaultActive = ref(route.path)

// 是否折叠
const isCollapse = computed(() => !(store.state.menuWidth == '250px'))

const menus = [{
    'name': '仪表盘',
    'icon': 'Monitor',
    'path': '/user',
    'child': []
},
{
    'name': '文章管理',
    'icon': 'Document',
    'path': '/user/article/list',
    'child': []
},
{
    'name': '收藏管理',
    'icon': 'Star',
    'path': '/user/favorite',
    'child': []
},
{
    'name': '评论管理',
    'icon': 'ChatLineRound',
    'path': '/user/comment/list',
    'child': []
},
{
    'name': 'AI助手',
    'icon': 'ChatDotRound',
    'path': '/user/ai/chat',
    'child': []
},
{
    'name': '归档管理',
    'icon': 'Files',
    'path': '/user/archive/list',
    'child': []
},
{
    'name': '博客设置',
    'icon': 'Setting',
    'path': '/user/blog/setting',
    'child': []
}]

const handleSelect = (e) => {
    router.push(e)
}
</script>

<style>
.meun {
    transition: all 0.3s;
    width: 250px;
    top: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #001428!important;
    height: 100vh; /* 确保菜单高度占满视口 */
    z-index: 1000; /* 确保菜单在其他元素之上 */
}

.user-el-menu {
    background-color: #001428!important;
    border-right: 0;
}

.user-el-menu-item {
    color: #c0c4cc!important;
}

.el-menu-item.is-active {
    background-color: #ffffff10!important;
}

.el-menu-item.is-active:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background-color: var(--el-color-primary);
}

.el-menu-item:hover {
    background-color: #ffffff10;
}

.meun::-webkit-scrollbar {
    width: 0;
}

.logo {
    height: 64px;
    background-color: #001428;
    color: #fff;
    @apply flex justify-center items-center text-xl font-thin;
}
</style>
